<template>
	<div class="star" :class="starTypeInfo">
		<span v-for="itemClass in itemClassesList" :class="itemClass" class="star-item"></span>
	</div>
</template>

<script>
	const LENGTH = 5;
	const CLS_ON = 'on';
	const CLS_HALF = 'half';
	const CLS_OFF = 'off';
	export default {
		props: [
			'size',
			'score'
		],
		data() {
			return {
				starTypeInfo:'',
				itemClassesList:[]
			}
		},
		methods: {
			starType() {
				var str = 'star-' + this.size;
				this.starTypeInfo = str;
			},
			itemClasses() {
				let result = [];
				let score = Math.floor(this.score * 2) / 2;
				let hasDecimal = score % 1 !== 0;
				let integer = Math.floor(score);
				console.log(this.score);
				
				for (let i = 0; i < integer; i++) {
					result.push(CLS_ON);
				}
				if (hasDecimal) {
					result.push(CLS_HALF);
				} 
				while (result.length < LENGTH){
					result.push(CLS_OFF);
				}
				this.itemClassesList = result;
			}
		},
		mounted() {
			this.starType();
			this.itemClasses();
			console.log(this.score)
		}
		
	};
</script>

<style lang="scss">
	 @import "../../common/styles/mixin.scss";
	
		.star-48{
			width: 100%;
			height: 20px;
			margin-right: 22px;
			text-align:center;
			background-size:20px 20px ;
			.star-item{
				display: inline-block;
				background-repeat:no-repeat ;
			}
				.on{
					display: inline-block;
					width: 20px;
					height: 20px;
					@include bg-image('star48_on');
					background-size: 20px 20px; 
				}
				.off{
					display: inline-block;
					width: 20px;
					height: 20px;
					@include bg-image('star48_off');
					background-size: 20px 20px; 
				}
				.half{
					display: inline-block;
					width: 20px;
					height: 20px;
					@include bg-image('star48_half');
					background-size: 20px 20px; 
				}
		}
			
			.star-36{
				width: 15px;
				height: 15px;
				margin-right: 6px;
				background-size:15px 15px ;
			}
			.star-24{
				width: 10px;
				height: 10px;
				margin-right: 3px;
				background-size:10px 10px ;
			}
	
</style>